<template>
    <div class="pushListTransition">
        <transition-group tag="ul" name="list" appear>
            <li class="card" v-for="item in list" :key="item.id">
                {{ item.id }}
            </li>
        </transition-group>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

// 列表数据
const list = ref(Array());
// 定时器
const interval = ref(0);

// 挂载后
onMounted(() => {
    // 初始化
    init();
});
// 销毁前
onUnmounted(() => {
    // 清除定时器
    clear();
});

// 方法

// 初始化
const init = () => {
    interval.value = window.setInterval(() => {
        list.value.unshift({
            id: new Date().getTime()
        });
    }, 1000)

}
// 清除定时器
const clear = () => {
    if (interval.value) {
        clearInterval(interval.value);
        interval.value = 0;
    }
}
</script>
<style lang="less" scoped>
.pushListTransition {
    width: 200px;
    height: 430px;
    margin: 100px auto;
    border: 1px solid red;
    overflow-y: auto;

    .list-enter-from,
    .list-leave-to {
        transform: translateY(-100%);
        opacity: 0;
    }

    .list-enter-to,
    .list-leave-from {
        transform: translateY(0%);
        opacity: 1;
    }

    .list-enter-active,
    .list-leave-active {
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }

    .list-move {
        transition: transform 0.3s ease-out;
    }

    // 隐藏滚动条
    &::-webkit-scrollbar {
        display: none;
    }

    .card {
        width: 100%;
        height: 100px;
        border: 1px solid #000;
        margin-bottom: 10px;
    }
}
</style>